<!--
   Copyright 2024 The Google Research Authors.
  
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at
  
       http://www.apache.org/licenses/LICENSE-2.0
  
   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
-->

<!DOCTYPE html>
<html>
<head>
<title>Click Button Click Tab Task</title>
<!-- stylesheets -->
<link rel="stylesheet" type="text/css" href="../core/core.css">
<link rel="stylesheet" type="text/css" href="../core/jquery-ui/jquery-ui.min.css">
<style>
  #area h3 { background: #007fff; border: 1px solid #003eff; border-radius: 3px; color: #ffffff; cursor: pointer; font-weight: normal; margin: 2px; padding: 1px; }
  #area div { margin: 2px; }
  .ui-tabs .ui-tabs-nav .ui-tabs-anchor { padding: 5px; }
  #area .alink { color: #0000EE; cursor: pointer; text-decoration: underline; }
  /* 160 + 160 + 50 + 30 */
  #wrap,
  #sync-task-cover {
    height: 400px;
    width: 160px;
  }

  #click-canvas,
  #reward-display {
    left: 165px;
  }

  #query {
    background-color: #FF0;
    font-size: 10px;
    height: 74px;
    padding: 3px;
  }
</style>

<!-- JS -->
<script src="../core/core.js"></script>
<script src="../core/d3.v3.min.js"></script>
<script src="../core/jquery-ui/external/jquery/jquery.js"></script>
<script src="../core/jquery-ui/jquery-ui.min.js"></script>
<script src="../common/ui_utils.js"></script>

<script>
core.EPISODE_MAX_TIME = 2000000;  // 2000 seconds

// click-button
var buttons = ['submit', 'okay', 'ok', 'yes', 'no', 'cancel', 'next', 'previous'];

var generateLinks = function(div){
  // since we randomly generate links, run this in a while loop
  // until we produce text that know for sure contains a link,
  // otherwise the script will error out and fail.
  var linkCreated = false;
  while(!linkCreated){
    div.empty(); // clear previous problem, if any
    var numTabs = core.randi(2, 7);
    var wrapper = $('<ul>').appendTo(div);
    for(var i=1;i<=numTabs;i++){
      var tab = $('<a>').attr('href', '#tabs-' + i).text('' + i)
        .appendTo($('<li>').appendTo(wrapper));
      var txt = ui_utils.generateWords(20).split(/\s/g);
      for(var j=0;j<txt.length; j++){
        if(Math.random() < 0.2){
          txt[j] = '<span class="alink">' + txt[j] + '</span>';
          linkCreated = true;
        }
      }
      var html = '<div id="tabs-' + i +  '"><p>' + txt.join(' ') + '</p></div>';
      div.append(html);
    }
  }

  // turn the HTML into jQuery tabs!
  $('#form2').tabs();
}

var bindClickEvents = function(){
  var elements = document.getElementsByClassName('alink');
  var correctIndex = core.randi(0, elements.length);
  var correctText = elements[correctIndex].innerHTML;
  for(var i = 0, len = elements.length; i < len; i++) {
    var e = elements[i];
    if(e.innerHTML === correctText) {
      d3.select(e).on('click', function(){ core.endEpisode(1.0, true); })
    } else {
      d3.select(e).on('click', function(){ core.endEpisode(-1.0); })
    }
  }

  return correctText;
}

var genProblem = function() {
  var task_state = -1.0;

  // clear previous problem, if any
  var button_div = d3.select('#form1');
  button_div.html('');
  var tab_div = $('#form2');
  if(tab_div.html().length > 0){ $('#form2').tabs('destroy'); }

  // click-button
  var num = 6;
  var elements = [];
  for (var i = 0; i < num; i++) {
    var u = core.randf(0, 1);
    var must_make_button = (i === num - 1) && elements.length === 0;

    if (u < 0.33 && !must_make_button) {
      var txt = ''; for (var q = 0; q < 3; q++) { txt += ' ' + core.sample(ui_utils.lorem_words); }
      button_div.append('div').html(txt);
    } else if (u < 0.66 && !must_make_button) {

      if (core.randf(0, 1) < 0.5) {
        var txt = ''; for (var q = 0; q < 3; q++) { txt += ' ' + core.sample(ui_utils.lorem_words); }
        txt += ': ';
        button_div.append('span').html(txt);
      }

      var w = core.randi(40, 150);
      button_div.append('input').attr('type', 'text').attr('style', 'width:' + w + 'px;');
      button_div.append('br');
    } else {
      var btn_text = core.sample(buttons);
      if (core.randf(0, 1) < 0.5) btn_text = ui_utils.txtCapitalize(btn_text);
      var btn = button_div.append('button').html(btn_text);
      if (core.randf(0, 1) < 0.5) button_div.append('br');
      elements.push(btn);
    }

  }
  var buttonText = core.sample(elements).html();
  for (var i = 0, len = elements.length; i < len; i++) {
    var e = elements[i];
    if (e.html() === buttonText) {
      e.on('click', function () { task_state = 1.0; console.log('click-button', task_state);})
    } else {
      e.on('click', function () { task_state = -1.0; console.log('click-button', task_state);})
    }
  }

  generateLinks(tab_div);

  var any = core.getOpt(core.QueryString, 'any', false);  // click Any link?
  var elements = document.getElementsByClassName('alink');
  var correctIndex = core.randi(0, elements.length);
  var correctText = elements[correctIndex].innerHTML;
  for(var i = 0, len = elements.length; i < len; i++) {
    var e = elements[i];
    if(e.innerHTML === correctText) {
      d3.select(e).on('click', function(){
        if (task_state == 1.0) {
          console.log('click-tab-2-hard', 1.0);
          core.endEpisode(1.0, true);
        } else {
          console.log('click-tab-2-hard', -1.0);
          core.endEpisode(-1.0);
        }
      })
    } else {
      d3.select(e).on('click', function(){console.log('click-tab-2-hard', -1.0);  core.endEpisode(-1.0); })
    }
  }

  // generate query text in the UI
  // d3.select('#query').html('Click on the "' + buttonText + '" button, and then switch between the tabs to find and click on the link "' + correctText + '".');
  d3.select('#query').html('Switch between the tabs to find and click on the link "' + correctText + '", after clicking on the "' + buttonText + '" button.');
}

window.onload = function() {
  core.startEpisode();
}
</script>
</head>
<!-- Base HTML -->
<body>
<div id="wrap">
  <div id="query"></div>
  <div id="area">
    <div id="form1"></div>
    <div id="form2"></div>
  </div>
</div>
</body>
</html>
